<template>
  <div class="m-nav">
    <i class="iconfont iconcaidan" @click="controlNav(true)"></i>
    <transition name="fade">
      <div class="menu" v-show="show">
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          text-color="#516379"
          active-text-color="#DD9E2D"
          router
        >
          <el-menu-item index="/" @click="controlNav(false)">
            <span slot="title">{{$t('nav.home')}}</span>
          </el-menu-item>
          <el-submenu index="1-1">
            <template slot="title">
              <span solt="title">{{$t('nav.block')}}</span>
            </template>
            <el-menu-item index="/block" class="sec-menu" @click="controlNav(false)">
              <span slot="title">{{$t('nav.viewblock')}}</span>
            </el-menu-item>
            <el-menu-item index="/tradelist" class="sec-menu" @click="controlNav(false)">
              <span slot="title">{{$t('nav.viewtx')}}</span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item index="/token" @click="controlNav(false)">
            <span slot="title">{{$t('nav.token')}}</span>
          </el-menu-item>
          <el-menu-item index="/mainHolder" @click="controlNav(false)">
            <span slot="title">{{mainCoin}}{{$t('nav.rank')}}</span>
          </el-menu-item>
          <el-submenu index="2-1">
            <template slot="title">
              <span solt="title">{{$t('nav.tool')}}</span>
            </template>
            <el-menu-item index="/alytx" class="sec-menu" @click="controlNav(false)">
              <span slot="title">{{$t('nav.analysis')}}</span>
            </el-menu-item>
            <el-menu-item index="/broadtx" class="sec-menu" @click="controlNav(false)">
              <span slot="title">{{$t('nav.broadcast')}}</span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item index="/contact" @click="controlNav(false)" v-if="contactOpen">
            <span slot="title">联系我们</span>
          </el-menu-item>
        </el-menu>
      </div>
    </transition>
    <div class="bg" @click="controlNav(false)" v-show="show"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  },
  computed: {
    mainCoin() {
      return process.env.VUE_APP_BASECOIN;
    },
    contactOpen() {
      return process.env.VUE_APP_CONTACT === "true";
    }
  },
  methods: {
    controlNav(val, url) {
      this.show = val;
      if (url) window.open(url);
    }
  }
};
</script>

<style lang="scss">
.m-nav {
  position: relative;
  .iconcaidan {
    color: $font_grey;
  }
  .back {
    width: 99px;
    height: 31px;
    background: rgba(217, 167, 58, 1);
    border-radius: 18px;
    color: #fff;
    font-size: 14px;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translate(-50%);
  }
  .menu {
    height: 100vh;
    width: 230px;
    z-index: 2002;
    position: fixed;
    top: 0;
    left: 0;
    background: $white;
  }
  .el-menu {
    border: none;
    .el-menu-item,
    .el-submenu__title {
      background-color: #fff;
      -webkit-tap-highlight-color: transparent;
    }
    .sec-menu {
      background-color: #f7fafd !important;
    }
  }
  .bg {
    background: rgba(0, 0, 0, 0.44);
    position: fixed;
    z-index: 2001;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.5s;
  }
  .fade-enter,
  .fade-leave-to {
    transform: translateX(-230px);
  }
}
</style>